<script>
import {addApi} from "../api/categoryApi.js";

export default {
  name: "CategoryAdd",
  data(){
    return{
      categoryList:{name:'',status:''},
      statusOptions: [
        { value: 1, label: '启用' },
        { value: 0, label: '禁用' }
      ]

    }

  },
  methods:{
   async handleSubmit(){
     if (!this.categoryList.name) {
       alert('请输入类别名')
       return
     }
     let {data:data} = await addApi(this.categoryList);
      this.$router.push('/systemManagement/categoryIndex')
    },
    handleCancel() {
      this.categoryList = {
        name: '',
        status: 1
      }
    }

  }
}
</script>

<template>
  <div class="category-form">
    <div class="form-item">
      <span class="required">* 类别名</span>
      <input v-model="categoryList.name" required class="input" />
    </div>

    <div class="form-item">
      <span class="required">* 状态</span>
      <el-select
          v-model="categoryList.status"
          placeholder="请选择状态"
          class="status-select"
      >
        <el-option
            v-for="item in statusOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
        />
      </el-select>
    </div>

    <div class="btn-group">
      <button class="submit-btn" @click="handleSubmit">提交</button>
      <button class="cancel-btn" @click="handleCancel">取消</button>
    </div>
  </div>
</template>

<style scoped>
.category-form {
  max-width: 500px;
  margin: 0 auto;
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.form-item {
  margin-bottom: 20px;
}

.required {
  color: #f56c6c;
  margin-right: 4px;
}

.input {
  width: 100%;
  padding: 10px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
}

.status-select {
  width: 100%;
}

.btn-group {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.submit-btn {
  padding: 10px 20px;
  background: #409eff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.cancel-btn {
  padding: 10px 20px;
  background: #f4f4f5;
  color: #909399;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
</style>